<script setup lang="ts">
import { onMounted } from "vue";
import { ref } from "vue";
import * as PIXI from "pixi.js";
import { drawStar } from "Gab/views/PIXI2D/Graphics/simple";
import { random } from "src/utils";
import { GabRoutes } from "src/router/modules/Gab";
import { useRoute } from "vue-router";

const route = useRoute();

let app: PIXI.Application;

const GabDom = ref<HTMLDivElement>();
const starBg = () => {
  app = new PIXI.Application({
    width: GabDom.value!.clientWidth,
    height: GabDom.value!.clientHeight,
    resolution: window.devicePixelRatio,
    autoDensity: true,
    antialias: true,
    backgroundAlpha: 0,
    resizeTo: GabDom.value,
  });
  app.view.style!.width = "100%";
  app.view.style!.height = "100%";
  GabDom.value!.appendChild(app.view as unknown as Node);

  // let taken = 0;
  let delay = random(100, 3000); // ms;
  let count = 0;
  let time = new Date().getTime();
  app.ticker.add(() => {
    let nowTime = new Date().getTime();
    // taken = 1000 / (nowTime - time);
    count += nowTime - time;
    time = nowTime;
    if (count >= delay) {
      drawStar(app);
      count = 0;
      delay = random(100, 3000);
    }
  });
};

const onAside = ref(false);



onMounted(() => {
  // starBg();
  // console.log(route);
  
});
</script>

<template>
  <div ref="GabDom" class="G-hello-world relative w-full h-full flex">
    <div
      :class="{ onAside: onAside }"
      class="Gab-wrapper absolute top-0 left-0 w-full h-full flex flex-col"
    >
      <header class="w-full h-16 box-border">
        <div
          class="G-swiper-wrapper w-full h-full flex items-center justify-center"
        >
          <router-link
            v-for="item in GabRoutes.children"
            :to="{ name: item.name }"
            class="G-swiper-item"
            :class="{ onActive: route.matched[2]?.name === item.name }"
            >{{ item.meta!.label }}</router-link
          >
        </div>
      </header>
      <section class="flex-auto flex">
        <!-- <aside v-show="childrenRouter?.length" class="h-full w-60 box-border">
       
        </aside> -->
        <main class="flex-auto">
          <router-view />
        </main>
      </section>
      <footer class="w-full h-16"></footer>
    </div>
  </div>
</template>

<style lang="less" scoped>
.G-hello-world {
  user-select: none;
  .Gab-wrapper {
    backdrop-filter: saturate(50%) blur(4px);
  }
  // .onAside {
  // }
  header {
    border-bottom: var(--vast-default-border);
    // background-color: rgba(204,204,204,0.2);
    .G-swiper-wrapper {
      gap: 3rem;

      .G-swiper-item {
        font-weight: bold;
        font-size: 1rem;
        cursor: pointer;
        min-width: 6rem;
        &.onActive {
          font-size: 1.25rem;
          color: #ff1981;
        }
      }
    }
  }
  aside {
    border-right: var(--vast-default-border);
    // background-color: rgba(204,204,204,0.2);
  }
  footer {
    border-top: var(--vast-default-border);
    // border-bottom: var(--vast-default-border);
    background-color: rgba(204, 204, 204, 0.2);
  }
}
</style>
